<!DOCTYPE html>
<html>
<head>
	<title>{{ the_title }}</title>
	<link rel="stylesheet" href="static/style.css">
	<style>
		body {
            background-image: linear-gradient(#FFDEAD, #AFEEEE);
        }

        .centertable{
        	width: 50%;
            margin: 0 auto;
        }
        table {
        	background: #FFEFDB;
        }
        p{
        	font-size: 20px;
        	color:#838B8B;
        }
        button{
            line-height:30px;
            margin: 30px;
            width: 130px;
            height: 30px;
            border-radius:13px ;
            outline: none;
            border: none;
            background-image: linear-gradient(120deg, #C1FFC1 0%, #FFC1C1 100%);
            color: #FFFFFF;
        }

        button:hover{
            background-image: linear-gradient(to top, #FFC1C1 0%,#C1FFC1 100%);
        }
	
	</style>
</head>
<body align="center">
<form method="GET" action="/walking" id="login-box">
<h1><br>规划结果</b></h1>
<div class="centertable">
	<table>
        <tr><td>起点</td><td>{{ the_start_address }}</td></tr>
        <tr><td>终点</td><td>{{ the_end_address }}</td></tr>
    </table>
    <p>本次行程距离为{{ the_total_walk }}米，预计花费约{{ the_total_walk_time }}分钟，具体指引如下：</p>
    {{ the_html_table|safe }}
</div>
<div style="text-align:center;padding: 20px;">
        <button type="submit">重新规划</button>
</div>
</form>
<div style="padding: 20px 0;">
<form method="GET" action="entry" id="login-box">
    <div style="text-align:center;padding: 20px;">
        <button type="submit">首页</button>
    </div> 
</form>
</div>
</body>
</html>
